<template>
  <div class="cart">
    <div class="cart-nav">
      <nav-bar>
        <div slot="center">购物车<span v-if="cartListProNum">({{ cartListProNum }})</span></div>
      </nav-bar>
    </div>
    <!-- 商品列表 -->
    <scroll :probe-type="3" :pull-up-load="true" ref="scroll">
      <cart-list class="cart-list" :cart-list="cartList"></cart-list>
    </scroll>
    <!-- 底部汇总 -->
    <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>
<script>
import {mapState, mapGetters } from "vuex";

import NavBar from "components/common/navBar/NavBar";
import Scroll from "components/common/scroll/Scroll";

import CartList from "./childComps/CartList";
import CartBottomBar from "./childComps/CartBottomBar";
export default {
  name: "Cart",
  components: {
    NavBar,
    Scroll,
    CartList,
    CartBottomBar
  },
  computed: {
    ...mapState(['cartList']),
    ...mapGetters(["cartListProNum"]),
  },
  activated(){
    this.$refs.scroll.refresh();
  }
};
</script>
<style lang="scss" scoped>
.cart{
  position: relative;
  height: 100vh;
}
.cart-nav {
  background: var(--color-high-text);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

</style>
